Skip to main content

Quick Start - Vue

How to use dxchart5-react with Vue based apps​

For applications that doesn't use react as a UI framework dxchart5-react package has a special function createChart, which attaches the ChartReactApp component to a given HTML element.

Use createChart function to create a dxchart5-react component​

Applications that use Vue as a UI framework can easily use createChart function to render ChartReactApp in the usual .vue component.

<!--dxcharts.vue-->
<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

	const chartContainer = ref();
	let destroyChart = undefined;

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
			},
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>

<style scoped>
	.dxcharts {
		height: 100vh;
		width: 100vw;
		min-width: 100vw;
	}

	@media (min-width: 490px) {
		.dxcharts {
			height: 576px;
			width: 800px;
		}
	}
</style>

Container element of the ChartReactApp component should have the height and width in absolute units such as px, or vh, because that's how CSS works. So to make it display right, just give it a height 576px and width 800px for example.

Then you should see the following.

That's the bare minimum usage with mock data.

Enjoy!​

How to use ChartReactAPI​

To call ChartReactAPI methods you should somehow store the link to the API object in your application. To do so in Vue app you can use ref() concept or assign API object reference to a plain variable, it depends on your application needs.

Full ChartReactAPI reference could be found on API reference page.

Here's a minimum example:

<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import type {
		ChartReactAPI,
		ChartReactAPICreatedCB,
	} from '@dx-private/dxchart5-react/dist/chart/view-models/api/chart-react-api.view-model';
	import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

	const chartContainer = ref();
	const chartReactAPI = ref<ChartReactAPI>();
	let destroyChart = undefined;

	const setChartReactAPIHandler: ChartReactAPICreatedCB = api => {
		chartReactAPI.value = api;
	};

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
			},
			onApiCreated: setChartReactAPIHandler,
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>

How to configure dxchart5-react library​

dxchart5-react has a very strong configuration abilities, most of the time you would need to change it for your needs.

All the configurable stuff could be found on configuration reference page.

<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

	const chartContainer = ref();
	let destroyChart = undefined;

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
				chartReactConfig: {
					toolbar: {
						enabled: false,
					},
				},
			},
	           ...
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>

Further reading​